<template>
    <div id="IndexHeader">
        <el-menu mode="horizontal" background-color="#000" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">
                <img src="../assets/img/logo.jpg" alt="Logo" class="logo">
            </el-menu-item>
            <el-menu-item index="8" style="margin-left: 600px;" @click="navigator('8')">首页</el-menu-item>
            <el-menu-item index="2" @click="navigator('2')">教练员</el-menu-item>
            <el-menu-item index="3" @click="navigator('3')">球队</el-menu-item>
            <el-menu-item index="4" @click="navigator('4')">赛事中心</el-menu-item>
            <el-menu-item index="5" @click="navigator('5')">公告信息</el-menu-item>
            <el-menu-item index="6" @click="navigator('6')">训练计划</el-menu-item>
            <el-menu-item index="7" @click="navigator('7')">个人中心</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: 'IndexHeader',
    data() {
        return {

        }
    },
    methods: {
        navigator(item) {
            if (item === '2') {
                this.$router.push('/coach')
            } else if (item === '3') {
                this.$router.push('/team')
            } else if (item === '4') {
                this.$router.push('/competition')
            } else if (item === '5') {
                this.$router.push('/announcement')
            } else if (item === '6') {
                this.$router.push('/train')
            } else if (item === '7') {
                this.$router.push('/personal')
            } else if (item === '8') {
                this.$router.push('/home')
            }
        }
    }
}
</script>

<style scoped lang="scss">
#IndexHeader {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;


    .logo {
        height: 60px;
        margin-right: 60px;
    }
}
</style>
